<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎使用家政预约系统</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
</head>
<body style="background: url(images/1.jpg);background-size: 100%">

<div class="layui-container">
    <div class="layui-header header header-demo"></div>
    <div class="layui-header header header-demo" align="center"><h1>欢迎使用家政预约系统</h1></div>
    <div class="layui-row layui-col-md4 layui-col-md-offset4">
        <form class="layui-form layui-form-pane1" >
            <div class="layui-form-item">
                <label class="layui-form-label">账号:</label>
                <div class="layui-input-block">
                    <input type="text" name="phone" id="phone" required lay-verify="required" placeholder="请输入账号"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码:</label>
                <div class="layui-input-block">
                    <input type="password" name="password" id="password" required lay-verify="required" placeholder="请输入密码"
                           autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <input type="button" class="layui-btn layui-btn-fluid" id="login"  value="登录" lay-filter="formDemo"/>
            </div>
        </form>

<!--        <div class="layui-form-item" style="float: right">-->
<!--            <a href="#" data-toggle="modal" data-target="#myModal">忘记密码?</a>-->
<!--        </div>-->

    </div>
</div>
<!-- 忘记密码 -->

<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
     data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog " style=" width: 400px">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    找回密码
                </h4>
            </div>
            <div class="modal-body">
                <div class="layui-form-item">
                    <label class="layui-form-label">账号:</label>
                    <div class="layui-input-block">
                        <input type="text" id="checkcodePhone" name="forgetPhone"
                               required lay-verify="required" placeholder="账号"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="input-group">
                    <input type="text" id="getcode" class="layui-input "/>
                    <span class="form-group input-group-btn">
                                 <button class="btn btn-default" id="getCheckCode" type="button">获取验证码</button>
                                 </span>
                </div>
                <br>
                <div class="layui-form-item">
                    <label class="layui-form-label">密码:</label>
                    <div class="layui-input-block">
                        <input type="password" id="resetpassword" name="forgetPhone"
                               required lay-verify="required" placeholder="密码"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">确认:</label>
                    <div class="layui-input-block">
                        <input type="password" id="confirm" name="password"
                               required lay-verify="required" placeholder="确认密码"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>

            </div>

            <div class="modal-footer">
                <button id="submitbutton" type="button" class="layui-btn layui-btn-primary"
                         data-toggle="resetPasswordModal" data-dismiss="modal" data-target="#resetPasswordModal">
                    保存
                </button>
                <button type="button" class="layui-btn layui-btn-primary" data-dismiss="modal">
                    取消
                </button>
            </div>
        </div>
    </div>
</div>


</body>
<script src="layui/layui.all.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/md5.js"></script>
<script>
    $(function () {
        //登录
        $("#login").click(function () {
            login();
        });
        //发送验证码
        $("#getCheckCode").click(function () {
            if ($("#checkcodePhone").val().trim()==0){
                layer.msg('请填写账号', {
                    time: 2000,
                    btn: ['返回']
                });
                return;
            }
            //发起验证码
            getCode();
            settime($("#getCheckCode"));
        });
        //验证验证码
        $("#submitbutton").click(function () {

            if ($("#checkcodePhone").val().trim().length==0){
                layer.msg('请填写账号', {
                    time: 2000,
                    btn: ['返回']
                });
                return;
            }
            if($("#getcode").val().trim().length==0){
                layer.msg('请输入验证码', {
                    time: 2000, //20s后自动关闭
                    btn: ['好的']
                });
            }
            var password=$("#resetpassword").val().trim();
            var confirm=$("#confirm").val().trim();
            if (password==confirm){
                restPassword();
            }
            else {
                layer.msg('密码不一致', {
                    time: 1000, //20s后自动关闭
                    btn: ['好的']
                });
            }

        })
        function login(){
            var phone=$("#phone").val().trim();
            var password=$("#password").val().trim();
            if (!cheeckPone(phone)){
                layer.msg('账号格式不正确', {
                    time: 2000,
                    btn: ['返回']
                });
                return;
            }
            if (password.length==0){
                layer.msg('请填写账号', {
                    time: 2000,
                    btn: ['返回']
                });
                return;
            }
            var json = {phone:phone,password:hex_md5(password)};
            console.log(json)
            $.ajax({
                url:"/login/login",   // 请求路径
                type:"post",            // 请求的方式，不区分大小写
                cache:false,            // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
                contentType:"application/json",
                datatype:"json",        // 返回类型，text文本、html页面、json数据
                data:JSON.stringify(json),
                success:function(response){
                   if(response.code==200){
                       if(response.role=="3"){
                           window.location.href="/admin/index.html"
                       }
                       if(response.role=="2"){
                           window.location.href="/tea/index.html"
                       }
                       if(response.role=="1"){
                           window.location.href="/stu/index.html"
                       }
                   }
                   else {
                       layer.msg('账号或密码错误！', {
                           time: 2000, //20s后自动关闭
                           btn: ['重试']
                       });
                   }
                },
                error:function(response){
                    console.log("出错返回: " + response);
                    console.log("出错数据: " + JSON.stringify(response));
                }
            });



        }
        function getCode(){
            var json = {phone:$("#checkcodePhone").val().trim(),role: $("input[name='role']:checked").val()};
            console.log(json);
            $.ajax({
                url:"/login/getCode",
                type:"post",
                cache:false,
                contentType:"application/json",
                datatype:"json",
                data:JSON.stringify(json),
                success:function(response){
                    if(response.code==200){
                        console.log(response.number);
                    }
                    }
                ,
                error:function(response){
                    console.log("出错返回: " + response);
                    console.log("出错数据: " + JSON.stringify(response));
                }
            });

        }

        function restPassword() {

            var json = {phone:$("#checkcodePhone").val().trim(),
                number:$("#getcode").val().trim(),
                password:hex_md5($("#resetpassword").val().trim())
            };

            console.log(json);
            $.ajax({
                url:"/login/resetPassword",
                type:"post",
                cache:false,
                contentType:"application/json",
                datatype:"json",
                data:JSON.stringify(json),
                success:function(response){
                    if(response.code==200){
                        layer.msg('修改成功', {
                            time: 1000, //20s后自动关闭
                        });
                    }
                    else if(response.code==201) {
                        layer.msg('验证码失效请重试', {
                            time: 1000, //20s后自动关闭
                        });

                    }else {
                        layer.msg('密码修改失败请重试', {
                            time: 1000, //20s后自动关闭
                        });
                    }
                }
                ,
                error:function(response){
                    console.log("出错返回: " + response);
                    console.log("出错数据: " + JSON.stringify(response));
                }
            });

        }


    })
    function cheeckPone(phone) {
        return phone.length >= 2;
        // var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
        // if (!myreg.test(phone)) {
        //     return false;
        // } else {
        //     return true;
        // }
    }
    //验证倒计时
    var countdown = 60;

    function settime(obj) { //发送验证码倒计时
        if (countdown == 0) {
            obj.attr('disabled', false);
            obj.text("免费获取验证码");
            countdown = 60;
            return;
        } else {
            obj.attr('disabled', true);
            obj.text("重新发送(" + countdown + ")");
            countdown--;
        }
        setTimeout(function () {
                settime(obj)
            }
            , 1000)
    }
</script>

</html>